<template>
    <div>
        <div ref="main" style="width: 100%;height: 400px;"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    chartsColor: {
        type: String,
        default: '#5470c6'
    },
    chartsType: {
        type: String,
        default: 'bar'
    },
})
const data = reactive({
    option: {
        color: props.chartsColor,//系列住颜色
        title: {
            text: 'ECharts 入门示例',
            textStyle: {
                color: "#c00000",

            },
            left: 'center',
            subtext: '入门示例',
            subtextStyle: {
                fontWeight: "bolder",
                color: '#f60'
            }
        },
        legend: {
            data: ['销量'],
            left: 'right',
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫衬衫衬衫衬衫衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            axisLine: {//坐标轴轴线相关设置
                lineStyle: {
                    color: '#c00',
                    width: 2
                }
            },
            axisLabel: {//坐标轴刻度标签的相关设置
                // 可以设置成 0 强制显示所有标签。
                // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                interval: 0,//强制显示所有标签的label

                // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
                // 旋转的角度从 -90 度到 90 度。
                // rotate: 90,

                // 文字格式化
                formatter: function (value, index) {
                    // 文字竖排
                    return value.split('').join('\n')
                }
            }
        },
        yAxis: {
            axisLabel: {//坐标轴刻度标签的相关设置
                // 可以设置成 0 强制显示所有标签。
                // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                interval: 0,//强制显示所有标签的label

                // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
                // 旋转的角度从 -90 度到 90 度。
                // rotate: 90,

                // 文字格式化
                formatter: function (value, index) {
                    // 文字竖排
                    return value + '件';
                }
            }
        },
        grid: {//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线
            left: "5%",
            right: '2%',
            containLabel: true

        },
        series: [
            {
                name: '销量',
                type: props.chartsType,
                // type: 'line',
                data: [5, 20, 36, 10, 10, 20],
                label: { //标签
                    show: true,//标签显示
                    rotate: 90
                }
            }
        ],
        tooltip: {//是否显示提示框组件
            show: true,
            trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            // formatter: '名称：{b}</br>{a}：{c}',//模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。

            formatter: function (params) {
                // params是数组
                var data = params[0]
                return '名称：' + data.name + '</br>' + '总销量：' + data.value + '</br>' + '图表类型：' + data.seriesType
            }
        }
    }
})
const main = ref(null)
onMounted(() => {
    initCharts()
})
function initCharts() {
    var myChart = echarts.init(main.value);
    myChart.setOption(data.option);
    // 图表响应式
    // window.addEventListener('resize', () => {
    //     myChart.resize()
    // })
    window.onresize = () => {
        myChart.resize()
        //如果有多个表变动在下方依次写下去就可以了
    }
}
</script>
  
<style scoped></style>
  